<template>
  <div class="list-wrapper" style="margin-top: 20px">
    <el-table :data="list" style="width: 100%" :height="height">
      <el-table-column prop="name" label="商品信息" width="500">
        <template slot-scope="scope">
          <div v-if="showSecTitle(scope.$index)" class="secTitle">
            <p>订单号:{{ scope.row.order_no }}</p>
            <p style="margin-left: 5px">下单时间：{{ scope.row.created_at }}</p>
          </div>
          <div v-for="(item, index) of scope.row.commodity" v-else :key="index" class="secTitle">
            <el-avatar :size="80" :src="item.img" shape="square" />
            <div class="text" style="width: 250px;">
              <p>{{ item.name }}</p>
              <p>{{ '单价：' + item.price + '￥' }}</p>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="pay" :label="setStatusName" width>
        <template slot-scope="scope">
          <div v-if="showSecTitle(scope.$index)" />
          <div v-for="(item, index) of scope.row.commodity" v-else :key="index" style="line-height: 150px">{{ parseFloat(item.price) + parseFloat(item.freight) }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="assistant" label="下单人" width="200">
        <template slot-scope="scope">
          <div v-if="showSecTitle(scope.$index)" />
          <div v-else>
            <div class="shop-wrapper">
              <!-- <el-avatar :size="50" :src="scope.row.avatar" shape="square" /> -->
              <span>{{ scope.row.realname }}</span>
            </div>
            <p style="white-space: nowrap">{{ '收货人：' + scope.row.realname + ' / ' + scope.row.mobile }}</p>
            <p>{{ scope.row.city_str + '  ' + scope.row.detail }}</p>
            <p>备注：{{ scope.row.remark ? scope.row.remark : '暂无备注' }}</p>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column  label="订单备注:" width="200">
        <template slot-scope="scope">
          <div v-if="showSecTitle(scope.$index)" />
          <div v-else>
            <span style="padding: 0 15px; color: #409EFF; cursor: pointer;" @click="viewRemark(scope)">备注</span>
          </div>
        </template>
      </el-table-column> -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div v-if="showSecTitle(scope.$index)" />
          <div v-for="(item, index) of scope.row.commodity" v-else :key="index" style="padding: 0 58px">
            <div class="d-flex">
              <span v-if="scope.row.status === 2" style="padding: 0 20px; color: #409EFF;" @click="deliverClick(item)">发货</span>
              <span v-if="showAmend(scope)" style="padding: 0 20px; color: #409EFF;" @click="amendStatusClick(scope)">修改状态</span>
            </div>
            <div class="d-flex">
              <span v-if="scope.row.status !== -1" style="padding: 0 20px; color: #F56C6C; white-space: nowrap" @click="closeOrder(scope)">关闭订单</span>
              <span style="padding: 0 20px; color: #1BAAB0;" class="detail" @click="detail(scope)">订单详情</span>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <order-detail :order-detail="orderDetail" :dialog-visible="dialogVisible" @closeDialog="handleCloseDialog" />
    <Remark ref="remark" :remark="remark" @confirm="handleRemarkConfirm" />
    <Deliver :id="id" ref="deliver" @success="handleSuccess" />
    <AmendOrder ref="amendOrder" :status-name="statusName" @confirm="handleConfirm" />
  </div>
</template>
<script>
import OrderDetail from './orderDetail'
import { closeSeckillOrder, amendOrderStatus, amendSeckillStatus } from '@/api/seckill'
import Remark from './remark'
import Deliver from './deliver'
import AmendOrder from './amendOrder'
const ERR_OK = 200
export default {
  components: {
    OrderDetail,
    Remark,
    Deliver,
    AmendOrder
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    status: {
      type: Number,
      default: 2
    }
  },
  data() {
    return {
      dialogVisible: false,
      orderDetail: {},
      height: 0,
      remark: '',
      id: '',
      statusName: '',
      order_no: '',
      commodityIndex: 0
    }
  },
  computed: {
    setStatusName() {
      console.log(this.status, 'status')
      return this.status === 2 ? '实付款' : '待付款'
    }
  },
  created() {
    this.initHeight()
  },
  methods: {
    handleConfirm(orderStatus) {
      this._amendSeckillStatus({ order_no: this.order_no, order_status: orderStatus })
        .then(() => {
          this.$emit('success')
        })
        .catch(err => {
          console.log(err)
        })
    },
    showAmend(scope) {
      if (scope.row.order_status === 4 || scope.row.order_status === 5) {
        return false
      } else {
        return true
      }
    },
    amendStatusClick(scope) {
      this.$refs.amendOrder.show()
      this.id = scope.row.id
      this.order_no = scope.row.order_no
      switch (scope.row.status) {
        case 2:
          this.statusName = 'delivery'
          break
        case 0:
          this.statusName = 'payment'
          console.log(this.statusName)
          break
        case 3:
          this.statusName = 'receipt'
          console.log(this.statusName)
          break
      }
    },
    closeOrder(scope) {
      this.$refs.remark.show()
      this.order_no = scope.row.order_no
      // this.$confirm('确认关闭订单吗？')
      //   .then(_ => {
      //     this._closeSeckillOrder(scope.row.id)
      //       .then(() => {
      //         this.$emit('success')
      //       })
      //       .catch(err => {
      //         console.log(err)
      //       })
      //   })
      //   .catch(_ => {})
    },
    handleRemarkConfirm(remark) {
      // this._setRemark({ id: this.id, message: remark })
      this._closeSeckillOrder({ order_no: this.order_no, remark })
        .then(() => {
          this.$emit('success')
        })
        .catch(err => {
          console.log(err)
        })
    },
    handleSuccess() {
      this.$emit('success')
    },
    deliverClick(item) {
      this.$refs.deliver.show()
      this.id = item.id
    },
    // viewRemark(scope) {
    //   this.$refs.remark.show()
    //   // this.remark = scope.row.message
    //   // this.id = scope.row.id
    // },
    detail(scope) {
      // console.log(scope, 'scope')
      this.dialogVisible = true
      this.orderDetail = scope.row
      // this._getOrderDetail(scope.row.id)
    },
    showSecTitle(index) {
      return (index % 2 === 0)
    },
    handleCloseDialog() {
      this.dialogVisible = false
    },
    // _getOrderDetail(id) {
    //   getOrderDetail(id)
    //     .then(res => {
    //       if (res.code === ERR_OK) {
    //         console.log(res)
    //         this.orderDetail = res.data
    //       }
    //     })
    //     .catch(err => {
    //       console.log(err)
    //     })
    // },
    _closeSeckillOrder({ order_no, remark }) {
      return closeSeckillOrder({ order_no, remark })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.$message({
              message: res.message,
              type: 'success'
            })
            return Promise.resolve(res)
          }
        })
        .catch(err => {
          console.log(err)
          return Promise.reject(err)
        })
    },
    _amendSeckillStatus({ order_no, order_status }) {
      return amendSeckillStatus({ order_no, order_status })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.$message({
              message: res.message,
              showClose: true,
              type: 'success'
            })
            return Promise.resolve()
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // _setRemark({ id, message }) {
    //   setRemark({ id, message })
    //     .then(res => {
    //       if (res.code === ERR_OK) {
    //         console.log(res)
    //         this.$message({
    //           message: res.message,
    //           type: 'success'
    //         })
    //       }
    //     })
    //     .catch(err => {
    //       console.log(err)
    //     })
    // },
    // _amendOrderStatus({ id, myType }) {
    //   return amendOrderStatus({ id, myType })
    //     .then(res => {
    //       if (res.code === ERR_OK) {
    //         console.log(res)
    //         this.$message({
    //           message: res.message,
    //           type: 'success',
    //           showClose: true
    //         })
    //         return Promise.resolve(res)
    //       }
    //     })
    //     .catch(err => {
    //       console.lgo(err)
    //       return Promise.reject(err)
    //     })
    // },
    initHeight() {
      this.height = document.body.clientHeight - 350
      window.onresize = () => {
        this.height = document.body.clientHeight - 350
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";
.el-table /deep/ .cell {
  .detail {
    color: #1baab0;
    cursor: pointer;
    white-space: nowrap;
  }
}
.el-table /deep/ .cell {
  &:nth-child(1) {
    // display: flex;
    // align-items: center;
    // justify-content: space-around;
    text-align: center;
  }
  .el-avatar {
    margin-right: 15px;
  }
}
.el-table /deep/ .el-table__row:nth-child(odd) {
  td{
    height: 20px;
    padding: 0;
    background: #FAFAFA;
  }
}
.secTitle{
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  p{
  }
}
.shop-wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.d-flex{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
  span{
    display: inline-block;
    width: 120px;
    text-align: left;
  }
}
</style>
